<!DOCTYPE html>

<html>
	<head>
		<meta charset="utf-8">
		<title>系统事件及绑定作业</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#div1,#div2,#div3{
				width: 300px;
				height: 300px;
				border: 1px solid #000000;
				border-radius: 20px;
				
			}
		</style>
		
	</head>
	<body>
		<h1>1.按钮和DIV的单击事件（三种绑定方式）</h1>
		<input type="button" value="我是一个按钮" id="b1" onclick="fun1()" />
		<input type="button" value="我是一个按钮" id="b2" />
		<div id="div1" ></div>
		<h1>2. 300px*300px的DIV 进入事件，离开事件，移动事件（三种绑定方式）</h2>
		<div id="div2" onmouseenter="fun2()"></div>
		
		<h1>3.登入页面 用户名输入框，密码输入框，提交按钮任务</h1>
		
		<form action="#" method="post" id="userinfo">
			用户名：<input type="text"	id="username" placeholder="输入账号"  onfocus="foucs1()" onblur="ifusername()" />
			<br>
			密&nbsp;&nbsp;&nbsp;码：<input type="password"	id="userpwd" placeholder="密码"  onfocus="foucs2()" onblur="ifuserpwd()"/>
			<br>
			<input type="button"  id="usersubmit" value="提交" onclick="demo1()" />
		</form>
		
		<h1>4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。</h1>
		<div id="div3" onclick="add1()" ondblclick="remo1()" >
			
		</div>
	</body>
	
	<script type="text/javascript">
	//1
		// 绑定1
			function fun1(){
				console.log('点我1');
			}
		// 绑定2
			document.getElementById('b2').onclick=fun1;
		//div绑定
			document.getElementById('div1').onclick=function(){
				console.log('有了一个小目标');
			}
	//2
		function fun2(){
			console.log('我进去了');
		}
		function fun3(){
			console.log('我出来了');
		}
		//绑定2
		document.getElementById('div2').onmouseleave=fun3;
		//绑定3 
		document.getElementById('div2').onmousemove=function (){
			console.log('我开始动了');
		}
	//3
		var name=document.getElementById('username');
		var pwd=document.getElementById('userpwd');
		
		// <h1>3.1 用户名框获取焦点事件，控制台输出：用户在输入名称</h1>
		function foucs1(){
			console.log('用户在输入名称');
		}
		// <h1>3.2  用户名框失去焦点事件，判断是否有输入文字，没有则alert没有输入用户名</h1>
		function ifusername(){
			if (document.getElementById('username').value=='') {
				alert('没有输入用户名');
			}else{
				console.log('用户名输入成功');
			}
		}
		// <h1>3.3  密码框获取焦点事件，控制台输出：用户在输入密码</h1>
		function foucs2(){
			console.log('用户在输入密码');
		}
		// <h1>3.4  密码框失去焦点事件，判断是否有输入文字，没有则alert没有输入密码</h1>
		function ifuserpwd(){
			if(document.getElementById('userpwd').value==''){
				alert('没有输入密码');
			}else{
				console.log('密码输入成功');
			}
		}
		// <h1>3.5 点击提交按钮，判断用户和密码是否为空。用户名为空，提示‘用户名为空’；
			// 	密码为空，提示‘密码为空’；均为空，则提示‘用户名和密码为空’</h1>
		function demo1(){
			
			if(document.getElementById('username').value==''&&document.getElementById('userpwd').value==''){
				alert("用户名或密码为空");
			}else{
				console.log('输入成功');
			}
		}
	//4
		// <h1>4.实现DIV 鼠标移动事件，采用监听器方式操作，可实现添加和清除监听器功能。</h1>
		function Sthh(){
			console.log("我开始动了");
		}
		
		function add1(){
			
		document.getElementById('div3').addEventListener('mousemove',Sthh);
		}
		function remo1(){
		document.getElementById('div3').removeEventListener('mousemove',Sthh);
		}


		
	</script>
</html>
